<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="查看订单"
        left-arrow
        @click-left="$router.back()"
        >
      </van-nav-bar>
    </header>
    <div class="content">
      <van-tabs v-model="active">
        <van-tab title="待付款">
          <div class="order" v-for="item in orderList1" :key="item.orderId">
            <div class="content" @click="orderDetail(item.orderId)">
              <h3>订单号：{{item.orderId}}</h3>
              <van-card
                v-for="val in item.proData"
                :key="val.proId"
                :num="val.num"
                :price="val.price"
                :title="val.proName"
                :thumb="val.proImg"
              />
            </div>
            <div class="order-footer">
              <span>总价：{{orderPrice(item.orderId)}}</span>
              <van-button round type="danger" size="mini" class="goPay" @click="goPay(item.orderId)">去支付</van-button>
            </div>
          </div>
        </van-tab>
        <van-tab title="待发货">
          <div class="order" v-for="item in orderList2" :key="item.orderId">
            <div class="content" @click="orderDetail(item.orderId)">
              <h3>订单号：{{item.orderId}}</h3>
              <van-card
                v-for="val in item.proData"
                :key="val.proId"
                :num="val.num"
                :price="val.price"
                :title="val.proName"
                :thumb="val.proImg"
              />
              <div class="order-footer">
                <span>总价：{{orderPrice(item.orderId)}}</span>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="待收货">
          <div class="order" v-for="item in orderList3" :key="item.orderId">
            <div class="content" @click="orderDetail(item.orderId)">
              <h3>订单号：{{item.orderId}}</h3>
              <van-card
                v-for="val in item.proData"
                :key="val.proId"
                :num="val.num"
                :price="val.price"
                :title="val.proName"
                :thumb="val.proImg"
              />
            </div>
            <div class="order-footer">
              <span>总价：{{orderPrice(item.orderId)}}</span>
              <van-button round type="danger" size="mini" class="goPay">确认收货</van-button>
            </div>
          </div>
        </van-tab>
        <van-tab title="待评价">
          <div class="order" v-for="item in orderList4" :key="item.orderId">
            <div class="content" @click="orderDetail(item.orderId)">
              <h3>订单号：{{item.orderId}}</h3>
              <van-card
                v-for="val in item.proData"
                :key="val.proId"
                :num="val.num"
                :price="val.price"
                :title="val.proName"
                :thumb="val.proImg"
              />
            </div>
            <div class="order-footer">
              <span>总价：{{orderPrice(item.orderId)}}</span>
              <van-button round type="danger" size="mini" class="goPay" @click="goPay(item.orderId)">去评价</van-button>
            </div>
          </div>
        </van-tab>
        <van-tab title="已完成">
          <div class="order" v-for="item in orderList5" :key="item.orderId">
            <div class="content" @click="orderDetail(item.orderId)">
              <h3>订单号：{{item.orderId}}</h3>
              <van-card
                v-for="val in item.proData"
                :key="val.proId"
                :num="val.num"
                :price="val.price"
                :title="val.proName"
                :thumb="val.proImg"
              />
            </div>
            <div class="order-footer">
              <span>总价：{{orderPrice(item.orderId)}}</span>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getOrder, pay } from '../../api/index.js'

import Vue from 'vue'
import { Card, Button, Tab, Tabs, NavBar } from 'vant'

Vue.use(Card)
Vue.use(Button)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(NavBar)

export default {
  data () {
    return {
      orderList: [],
      orderList1: [],
      orderList2: [],
      orderList3: [],
      orderList4: [],
      orderList5: [],
      active: 0
    }
  },
  mounted () {
    getOrder({
      userId: localStorage.getItem('userId')
    }).then(res => {
      // console.log(res.data)
      this.orderList = res.data.data
      res.data.data.forEach(val => {
        if (val.state === 0) {
          this.orderList1.push(val)
        } else if (val.state === 1) {
          this.orderList2.push(val)
        } else if (val.state === 2) {
          this.orderList3.push(val)
        } else if (val.state === 3) {
          this.orderList4.push(val)
        } else if (val.state === 4) {
          this.orderList5.push(val)
        }
      })
    })
  },
  methods: {
    orderDetail (id) {
      // console.log('去订单详情：' + id)
      this.$router.push('/orderDetail/' + id)
    },
    goPay (id) {
      pay({
        userId: localStorage.getItem('userId'),
        orderId: id
      }).then(res => {
        console.log('已付款')
        this.$router.go(0)
      })
    },
    orderPrice (id) {
      let i = 0
      this.orderList.some((val, idx) => {
        i = idx
        return val.orderId === id
      })
      return this.orderList[i].proData.reduce((prev, next) => {
        return prev + next.num * next.price
      }, 0)
    }
  }
}
</script>

<style lang="scss">
.order{
  margin: 0.2rem 0;
  padding-bottom: 0.2rem;
  border-bottom: solid 1px #eee;
  h3{
    padding: 0 0.1rem;
  }
}
.order-footer{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width:95%;
  .goPay{
    margin-left: 0.2rem;
  }
}
.van-tabs{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.van-tabs__content{
  overflow: auto;
  flex:1
}
</style>
